<!--
 Created by Been on 2017-12-01.
-->
<template>
  <div>
    <div class="favour-tab">
      <span class="favour-all favour-tab-active" @click="view(2)">全部 <i>{{foodFavour.length}}</i></span>
      <span class="favour-like" @click="view(0)">推荐 <i>{{favourLike}}</i></span>
      <span class="favour-sick" @click="view(1)">吐槽 <i>{{favourSick}}</i></span>
    </div>
    <div class="favour-filter" @click="duihaoShow">
      <i class="iconfont icon-duihao2" :class="{'favour-duihao-active':duihaoFlag}"></i> <span>只看有内容的评价</span>
    </div>
    <div class="favour-listWrap">
      <ul>
        <li v-for="favour in foodFavour" v-show="listShow(favour.rateType,favour.text)">
          <p class="favour-userWrap">
            <span class="favour-time">{{favour.rateTime | formatTimeFilter}}</span>
            <span class="favour-user">{{favour.username}}<img :src="favour.avatar" alt=""></span>
          </p>
          <p class="favour-estimate">
            <i class="iconfont icon-zan" v-show="favour.rateType == 0"></i>
            <i class="iconfont icon-cai" v-show="favour.rateType == 1"></i>
            <span>{{favour.text}}</span>
          </p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  let formatTime = require('format-datetime');
  export default{
    props: {
      foodFavour: {
        type: Array,
        default(){
          return []
        }
      }
    },
    data(){
        return {
          viewFlag: 2,
          duihaoFlag:false
        }
    },
    computed: {
      favourLike(){
        let count = 0;
        this.foodFavour.forEach((item) => {
          if (item.rateType == 0) {
            count++;
          }
        });
        return count;
      },
      favourSick(){
        let count = 0;
        this.foodFavour.forEach((item) => {
          if (item.rateType == 1) {
            count++;
          }
        });
        return count;
      }
    },
    filters: {
      formatTimeFilter (time){
        let date = new Date(time);
        return formatTime(date, "yyyy-MM-dd HH:mm:ss");
      }
    },
    methods:{
      duihaoShow(){
          this.duihaoFlag = !this.duihaoFlag;
      },
      view(type){
         this.viewFlag = type;
      },
      listShow(type,text){
//        console.log(type);
        if(this.viewFlag == 2){
          console.log(type);
          return true;

        }else{
          if(type == this.viewFlag){
            console.log(type);
            return true;
          }
        }
      }
    },

  }
</script>

<style lang="scss">
  @import "favour.scss";
</style>
